<template>
  <div class="main">
    <van-nav-bar title="找回密码" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmitPsd" v-show="isOk">
      <van-field
        v-model="username"
        name="username"
        label="用户名称"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <div class="title">
        <span>输入要您要找回密码的用户名</span>
      </div>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">下一步</van-button>
      </div>
    </van-form>
    <van-form @submit="onSubmitCode" v-show="!isOk">
      <van-field
        v-model="verCode"
        name="code"
        label="验证码"
        placeholder="请输入验证码"
      >
        <template #button>
          <van-button
            @click="sendCode"
            class="verCodeBtn"
            :disabled="!showText"
          >
            <span v-if="showText">发送验证码</span>
            <span v-else>{{ timeText }} 秒</span>
          </van-button>
        </template>
      </van-field>
      <div class="title">
        <span>验证码将发送到您绑定的手机和邮箱</span>
      </div>
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">下一步</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { userNameRequestInfo } from "@/api/login";
import { mapMutations } from "vuex";
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      username: "", // 用户名
      verCode: "", // 验证码
      isOk: true,
      timeText: "", //倒计时
      showText: true, //倒计时标识
      timer: null, // 定时器、
      userInfo: null,
    };
  },
  methods: {
    ...mapMutations("user", ["setUserInfo"]),
    // 下一步一
    async onSubmitPsd(values) {
      this.isOk = false;
      const {
        data: [data],
      } = await userNameRequestInfo(values.username); // 通过用户名获取用户信息
      this.userInfo = data;
      this.setUserInfo(this.userInfo);
    },
    // 下一步二
    onSubmitCode(val) {
      if (+val.code !== 9527) {
        this.verCode = ""; // 重置验证码
        this.$notify({
          message: "\n验证码不正确\n\n",
          color: "#fff",
          background: "#ee0a24",
          duration: 1000,
        });
      } else {
        this.verCode = ""; // 重置验证码
        this.$notify({
          message: "\n验证成功\n\n",
          color: "#fff",
          background: "#07c160",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.push("/confirmPsd");
        }, 1000);
      }
    },
    // 验证码按钮
    sendCode() {
      this.$notify({
        message: "\n验证码: 9527\n\n",
        color: "#fff",
        background: "#07c160",
        duration: 3000,
      });
      // 倒计时
      this.showText = false;
      this.timeText = 3;
      const timer = setInterval(() => {
        if (this.timeText > 0 && this.timeText <= 3) {
          this.timeText--;
        } else {
          this.showText = true;
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>
<style scoped lang="less">
.main {
  background-color: #f0f0f0;
  height: 100vh;
  .van-nav-bar {
    /deep/ .van-nav-bar__title {
      font-weight: 600;
    }
    /deep/ .van-nav-bar__left {
      .van-icon {
        color: #414655 !important;
        font-weight: 600;
      }
    }
  }
  .van-form {
    height: 228px;
    .van-cell {
      padding-top: 67px;
      flex-direction: column;
      /deep/ .van-field__body {
        padding: 40px 0 10px;
      }
      /deep/ .van-cell__title {
        font-weight: 600;
      }
    }
    .van-button {
      height: 88px;
      width: 694px;
      border: none;
      font-weight: 550;
      border-radius: 16px;
      background: linear-gradient(270deg, #ff512f, #f09819);
      box-shadow: 0 6px 12px #eb323266;
    }
  }
  .title {
    font-size: 24px;
    color: #a5a9b3;
    margin: 40px 0;
    text-align: center;
  }
  /deep/ .verCodeBtn {
    width: 200px !important;
    height: 64px !important;
    line-height: 64px !important;
    text-align: center !important;
    font-size: 26px !important;
    color: #5c5d60 !important;
    border: #ccc !important;
    border-radius: 10px !important;
    background: #fcfafa !important;
    box-shadow: none !important;
  }
}
</style>
